<template>
  <div>
    <el-form :inline="true" :model="searchParam" class="demo-form-inline">
      <el-form-item>
        <el-input
            clearable
            v-model="searchParam.name"
            placeholder="学校名称"
        />
      </el-form-item>
      <el-form-item>
        <el-select
            clearable
            v-model="searchParam.disabled"
            placeholder="请选择状态"
        >
          <el-option label="启用" value="false"/>
          <el-option label="禁用" value="true"/>
        </el-select>
      </el-form-item>
      <el-form-item style="width: 300px">
        <el-button type="primary" @click="search">查询</el-button>
        <el-button type="primary" @click="addView">添加学校</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="data.schools" border style="width: 100%" v-loading="data.loading" element-loading-text="拼命加载中">
      <el-table-column fixed prop="name" label="学校名称" align="center" width="300px"/>
      <el-table-column prop="disable" label="状态" align="center" width="150px">
        <template #default="scope">
          <el-tag
              :type="scope.row.disabled === false ? 'success' : 'danger'"
              disable-transitions
          >{{ scope.row.disabled === false ? "启用" : "禁用" }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
          prop="createTime"
          label="创建时间"
          width="180"
          align="center"
      >
      </el-table-column>
      <el-table-column
          prop="updateTime"
          label="更新时间"
          width="180"
          align="center"
      >
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="230" align="center">
        <template #default="scope">
          <el-button
              class="button-space"
              @click="enableSchool(scope.row.uuid)"
              v-if="scope.row.disabled"
              type="success"
              size="small"
          >启用
          </el-button>
          <el-button
              class="button-space"
              @click="disableSchool(scope.row.uuid)"
              v-if="!scope.row.disabled"
              type="warning"
              size="small"
          >禁用
          </el-button>

          <el-popconfirm
              title="你确定要删除该学校吗？"
              confirm-button-text="是"
              cancel-button-text="否"
              @confirm="deleteSchool(scope.row.uuid)"
          >
            <template #reference>
              <el-button
                  class="button-space"
                  type="danger"
                  size="small"
              >删除
              </el-button>
            </template>

          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        background
        layout="prev, pager, next"
        :total="data.total"
        style="text-align: center; margin-top: 10px"
        @current-change="currentChange"
    >
    </el-pagination>

    <!-- 添加或修改学校 -->
    <el-dialog :title="data.title" v-model="data.schoolAddOrUpdateDisable">
      <el-form :model="schoolAddOrUpdateData" :rules="rules">
        <el-form-item label="学校名称" label-width="130px">
          <el-input v-model="schoolAddOrUpdateData.name" autocomplete="off"/>
        </el-form-item>
        <el-form-item label-width="130px">
          <el-button @click="data.schoolAddOrUpdateDisable = false">取 消</el-button>
          <el-button type="primary" @click="addSchool">确认</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {onMounted, reactive} from "vue";
import {page, enable, disable, deleted, add} from "@/api/school/school";
import {ElMessage} from "element-plus";

export default {
  setup() {
    const searchParam = reactive({
      name: '',
      disabled: '',
      page: 1,
      size: 10
    })
    const schoolAddOrUpdateData = reactive({
      name: ''
    })
    const data = reactive({
      schools: [],
      total: 0,
      loading: false,
      title: '添加',
      schoolAddOrUpdateDisable: false
    })
    const rules = reactive({
      name: [
        {
          required: true,
          message: "请输入学校名称",
          trigger: "blur",
        },
      ]
    })
    /**
     * 分页查询学校
     * @returns {Promise<void>}
     */
    const pageSearchSchool = async () => {
      data.loading = true
      page(searchParam).then(res => {
        data.schools = res.data.records
        data.total = res.data.total
      }).finally(() => {
        data.loading = false
      })
    }

    /**
     * 启用学校
     */
    const enableSchool = async (uuid) => {
      enable(uuid).then(() => {
        ElMessage({
          message: '启用成功',
          type: 'success',
        })
        pageSearchSchool()
      })
    }

    /**
     * 禁用学校
     */
    const disableSchool = async (uuid) => {
      disable(uuid).then(() => {
        ElMessage({
          message: '禁用成功',
          type: 'success',
        })
        pageSearchSchool()
      })
    }
    /**
     * 删除学校
     * @param uuid
     * @returns {Promise<void>}
     */
    const deleteSchool = async (uuid) => {
      deleted(uuid).then(() => {
        ElMessage({
          message: '删除成功',
          type: 'success',
        })
        pageSearchSchool()
      })
    }
    /**
     * 搜索查询学校
     * @returns {Promise<void>}
     */
    const search = async () => {
      data.loading = true
      page(searchParam).then(res => {
        data.users = res.data.records
        data.total = res.data.total
      }).finally(() => {
        data.loading = false
      })
    }
    /**
     * 添加学校
     * @returns {Promise<void>}
     */
    const addSchool = async () => {
      add(schoolAddOrUpdateData).then(() => {
        ElMessage({
          message: '添加成功',
          type: 'success',
        })
        data.schoolAddOrUpdateDisable = false
        pageSearchSchool()
      })
    }
    onMounted(() => {
      pageSearchSchool()
    })
    /**
     * 显示添加页面
     * @returns {Promise<void>}
     */
    const addView = async () => {
      schoolAddOrUpdateData.name = ''
      data.schoolAddOrUpdateDisable = true;
    }
    const currentChange = (value) => {
      searchParam.page = value
      pageSearchSchool()
    }
    return {
      data,
      searchParam,
      schoolAddOrUpdateData,
      rules,
      enableSchool,
      disableSchool,
      search,
      deleteSchool,
      addView,
      addSchool,
      currentChange
    }
  }
}
</script>

<style scoped>

</style>